<template>
    <div class="echart" :id="cartId" :style="myChartStyle"></div>
</template>

  <script>
  import * as echarts from "echarts";

  export default {
    name: "charta",
    props:{
      cartId:"",
      mulColumnZZTData:{},
      myChartStyle:{},
    },
  mounted() {
    this.initEcharts();
  },
  watch: {
    // 监听parentValue的变化
    mulColumnZZTData(newValue, oldValue) {
      console.log("*********************变了")
      console.log(newValue)
      // 在这里可以执行需要的操作
    }
  },
  methods: {
    initEcharts() {
      // 多列柱状图
      const myChart = echarts.init(document.getElementById(this.cartId));
      myChart.setOption(this.mulColumnZZTData);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    }
  }
  };
  </script>

